<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
</body>
<script>
  // 获取Canvas元素和上下文对象
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');

  // 定义成语和答案
  const idiom = '画蛇添足';
  const answer = '舍近求远';

  // 绘制图形
  function draw() {
    // 清空画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 设置字体样式
    ctx.font = '30px Arial';
    ctx.fillStyle = 'black';

    // 绘制成语文本
    ctx.fillText(idiom, 50, 50);

    // 绘制答案文本
    ctx.fillText(answer, 50, 100);
  }
  draw()
  // 监听鼠标点击事件
  canvas.addEventListener('click', function(event) {
    const x = event.clientX - canvas.offsetLeft;
    const y = event.clientY - canvas.offsetTop;

    // 绘制点击位置的矩形框
    ctx.beginPath();
    ctx.rect(x, y, 10, 10);
    ctx.strokeStyle = 'red';
    ctx.stroke();

    // 检查点击位置是否在答案文本上
    const textWidth = ctx.measureText(answer).width;
    if (x >= 50 && x <= 50 + textWidth && y >= 100 && y <= 100 + 30) {
      // 如果点击在答案文本上，则验证通过，显示提示信息
      draw(); // 重绘画布，移除答案文本和矩形框
      alert('验证通过！');
    } else {
      // 如果点击不在答案文本上，则验证失败，重新绘制答案文本和矩形框
      draw(); // 重绘画布，显示答案文本和矩形框
      alert('验证失败，请再试一次。');
    }
  });

</script>
</html>